<template>
  <div class="orderProfits">
    <div class="searchBar">
      <div class="searchForm">
        <div class="name">店铺名称</div>
        <el-input
          v-model="searchParams.shopName"
          placeholder="请输入店铺名称"
          clearable>
        </el-input>
        <div class="name">商品ID</div>
        <el-input
          v-model="searchParams.productId"
          placeholder="请输入商品ID"
          clearable>
        </el-input>
        <div class="name">订单状态</div>
        <el-select
          v-model="searchParams.orderStatus"
          placeholder="请选择订单状态"
          clearable>
          <el-option label="待发货" value="待发货"></el-option>
          <el-option label="待支付" value="待支付"></el-option>
          <el-option label="已取消" value="已取消"></el-option>
          <el-option label="未发货，退款成功" value="未发货，退款成功"></el-option>
          <el-option label="已发货，待签收" value="已发货，待签收"></el-option>
          <el-option label="已发货，退款成功" value="已发货，退款成功"></el-option>
          <el-option label="已签收" value="已签收"></el-option>
          <el-option label="已签收，退款成功" value="已签收，退款成功"></el-option>
        </el-select>
        <div class="name">售后状态</div>
        <el-select
          v-model="searchParams.afterSalesStatus"
          placeholder="请选择售后状态"
          clearable>
          <el-option label="无售后或售后取消" value="无售后或售后取消"></el-option>
          <el-option label="退款成功" value="退款成功"></el-option>
          <el-option label="售后中" value="售后中"></el-option>
        </el-select>
        <div class="name">上家状态</div>
        <el-select
          v-model="searchParams.customNotes"
          placeholder="请选择上家状态"
          clearable>
          <el-option label="退款成功" value="退款成功"></el-option>
          <el-option label="已付款" value="已付款"></el-option>
        </el-select>

        <el-button type="primary" @click="handleSearch">查询</el-button>
      </div>
      <el-button type="primary" @click="handleExport">导出</el-button>
    </div>
    <el-table
      :data="tableData"
      height="100%"
      stripe
      style="width: 100%">
      <el-table-column label="序号" width="60">
        <template slot-scope="scope">
          {{scope.$index + 1 + (searchParams.pageNum - 1) * searchParams.pageSize}}
        </template>
      </el-table-column>
      <el-table-column prop="shopName" label="店铺名称" width="120"></el-table-column>
      <el-table-column prop="orderId" label="订单号" width="220"></el-table-column>
      <el-table-column prop="orderStatus" label="订单状态" width="160"></el-table-column>
      <el-table-column prop="afterSalesStatus" label="售后状态" width="160"></el-table-column>
      <el-table-column prop="productId" label="商品ID" width="120"></el-table-column>

      <el-table-column prop="otherService" label="商品编码"></el-table-column>
      <el-table-column prop="otherService" label="商品规格"></el-table-column>
      <el-table-column prop="otherService" label="多多进宝"></el-table-column>

      <el-table-column prop="quantity" label="商品数量（件）" width="120"></el-table-column>
      <el-table-column prop="paymentTime" label="支付时间" width="160"></el-table-column>
      <el-table-column prop="promiseShipTime" label="发货时间" width="160"></el-table-column>
      <el-table-column prop="merchantNotes" label="商家备注" width="260"></el-table-column>
      <el-table-column prop="merchantActualReceived" label="商家实收金额（元）" width="140"></el-table-column>
      <el-table-column prop="shootingOrderNumber" label="采购订单号" width="90"></el-table-column>
      <el-table-column prop="purchaseOrderId" label="中转仓订单号" width="200"></el-table-column>
      <el-table-column prop="shootingPrice" label="大秦拍单成本" width="100"></el-table-column>
      <el-table-column prop="totalPurchasePrice" label="中转仓拍单成本" width="120"></el-table-column>
      <el-table-column prop="balance" label="中转仓运费" width="90"></el-table-column>
      <el-table-column prop="totalCost" label="总成本"></el-table-column>
      <el-table-column prop="customNotes" label="上家状态"></el-table-column>
      <el-table-column prop="afterSalesLoss" label="售后亏损"></el-table-column>
      <el-table-column prop="expectedProfit" label="预计利润"></el-table-column>
      <el-table-column label="预计利润率" width="90">
        <template slot-scope="scope">
          <span style="color: #ff0000;">{{scope.row.expectedProfitRate.toFixed(2)}}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="actualProfit" label="实际利润"></el-table-column>
      <el-table-column prop="paymentIncome" label="货款收入"></el-table-column>
      <el-table-column prop="paymentRefund" label="货款退款"></el-table-column>
      <el-table-column prop="baseTechnicalServiceFee" label="技术服务费" width="90"></el-table-column>
      <el-table-column prop="useTechnicalServiceFee" label="先用后付"></el-table-column>
      <el-table-column prop="afterSalesCompensation" label="售后补偿消费者" width="120"></el-table-column>
      <el-table-column prop="freightCompensation" label="运费补偿"></el-table-column>
      <el-table-column prop="date" label="虚假轨迹"></el-table-column>
      <el-table-column prop="smallAmountPayment" label="小额打款"></el-table-column>
      <el-table-column prop="otherService" label="运费险"></el-table-column>
      <el-table-column prop="couponSettlement" label="优惠卷结算" width="90"></el-table-column>
    </el-table>
    <div class="pageContain">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParams.pageNum"
        :page-size="searchParams.pageSize"
        :page-sizes="[100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { exportShopOrders, getShopOrders } from '@/api/order'
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      searchParams: {
        shopName: "",
        productId: "",
        orderStatus: "",
        afterSalesStatus: "",
        customNotes: "",

        pageSize: 100,
        pageNum: 1,
      }
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      getShopOrders(this.searchParams).then(res => {
        const { total, rows } = res;
        this.tableData = rows;
        this.total = total;
      })
    },
    handleSearch() {
      this.initData();
    },
    handleSizeChange(v) {
      this.searchParams.pageNum = 1;
      this.searchParams.pageSize = v;
      this.initData();
    },
    handleCurrentChange(v) {
      this.searchParams.pageNum = v;
      this.initData();
    },
    handleExport() {
      this.download('/analysis/export', {}, '订单表.xlsx')
    }
  }
}
</script>
<style lang="scss" scoped>
div.orderProfits {
  div.searchBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    div.searchForm {
      display: flex;
      justify-content: start;
      align-items: center;
      .el-input, .el-select {
        width: 180px;
      }
      div.name {
        width: 60px;
        margin-right: 5px;
        font-size: 14px;
        &:not(:first-child) {
          margin-left: 14px;
        }
      }
      .el-button {
        margin-left: 14px;
      }
    }
    margin-bottom: 20px;
  }
}
</style>
